<template>

	<view>
		<uni-search-bar @confirm="search" @input="input" v-model="seachValue"></uni-search-bar>
	</view>

	<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		:duration="duration">
		<swiper-item >
			<image src="https://img1.baidu.com/it/u=321920714,3009438145&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=500"></image>
		</swiper-item>
		<swiper-item>
			<image src="https://img.zcool.cn/community/0194c85fc21e1311013fdcc70573ab.jpg@2o.jpg"></image>
		</swiper-item>
		<swiper-item>
			<image src="http://img2.baidu.com/it/u=2265201048,2151407574&fm=253&app=138&f=JPEG?w=1817&h=581"></image>
		</swiper-item>
	</swiper>



	<view class="content">
	<view class="item" v-for="item  in   tableData">
			<image :src="item.imgUrl"   @click="doShowDetail(item.id)"></image>
			<view>
				<text>{{item.name}}</text>
			</view>
			<view>{{item.price}}</view>
		</view>
	

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"


	const seachValue = ref('')

	const tableData = ref([])
	const page = ref({
		pageNum: 1,
		pageSize: 4,
		maxPageNum: -1
	});

	const queryPage = () => {
		uni.request({
			url: `http://localhost:3000/goods?_page=${page.value.pageNum}&_per_page=${page.value.pageSize}`,
			success: (res) => {
				console.log(res.data)
				tableData.value.push(...res.data.data);
				page.value.maxPageNum = res.data.pages;
				//['a','b','c']     ...['a','b','c']   = 'a','b','c'    push('a','b','c')

			}
		});
	}


	onMounted(() => {
		queryPage()

	})


	onReachBottom(() => {
		if (page.value.pageNum < page.value.maxPageNum) {
			page.value.pageNum++;
			queryPage()
		}

	/* 	uni.showToast({
			title: '加载新数据',
			duration: 2000
		})
 */


	})

	onPullDownRefresh(() => {
		page.value.pageNum = 1;
		queryPage()
		uni.stopPullDownRefresh()
		uni.showToast({
			title: '数据刷新了',
			duration: 2000
		})



	})


	const search = () => {

		uni.request({
			url: `http://localhost:3000/goods`,
			success: (res) => {
				const newTableData = res.data.filter((item) => {
					return item.name.includes(seachValue.value)
				})
				console.log(newTableData)
				tableData.value = [];
				tableData.value.push(...newTableData)




			}
		});

	}
	
	const  doShowDetail  =(id)=>{
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		});
	}
	
	
	
	
</script>

<style  scoped>
	.content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	


	}

	.item {
		width: 320rpx;
		height: 600rpx;
		/* 		background-color: black; */
		margin: 10rpx;
		background-color: white;
	
		padding: 5rpx;



	}

	.item image {
		width: 100%;
		height: 500rpx;

	}
	
	.swiper {
		height: 400rpx;
		
	}
	
	.swiper  image {
		height: 100%;
		width: 100%;
	}
	

</style>